<template>
  <div class="flex flex-wrap gap-1">
    <el-button class="!ml-0" plain @click="open">Common VNode</el-button>
    <el-button class="!ml-0" plain @click="open1">Dynamic props</el-button>
  </div>
</template>

<script setup lang="ts">
import { h, ref } from 'vue'
import { ElIcon, ElMessageBox, ElSwitch } from 'element-plus'
import { Warning } from '@element-plus/icons-vue'
import CmpMessage from './MessageCmp/CmpMessage.vue'

const open = () => {
  ElMessageBox({
    title: '',
    // center: true,
    // vNode 异常请求参数信息
    message: () =>
      h('div', null, [
        h('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, [
          h('h3', { style: { marginBottom: '10px' } }, '请求异常'),
          h(
            ElIcon,
            {
              size: '40px',
              color: 'rgba(245, 108, 108, 1)',
            },
            () => [h(Warning)],
          ),
          h(
            'span',
            { style: { color: '#f56c6c', display: 'flex', alignItems: 'center' } },
            `状态码: 404`,
          ),
        ]),
        h(CmpMessage, {
          msg: '请求异常,请检查网络连接,并刷新页面, 或联系管理员, 联系电话: 13800138000',
          code: '404',
          url: 'http://127.0.0.1:5500/dist/remote-component.umd.js',
        }),
      ]),
    confirmButtonText: '复制命令',
    showCancelButton: true,
    cancelButtonText: '取消',
  })
}
open()

const open1 = () => {
  const checked = ref<boolean | string | number>(false)
  ElMessageBox({
    title: 'Message',
    // Should pass a function if VNode contains dynamic props
    message: () =>
      h(ElSwitch, {
        modelValue: checked.value,
        'onUpdate:modelValue': (val: boolean | string | number) => {
          checked.value = val
        },
      }),
  })
}
</script>

<style scoped></style>
